<template>
  <div>
    <div class="provider-list">
      <div class="content">
        <div class="project-info">
          <div class="form-left-right">
            <el-form
              style="max-width: 1200px"
              :model="state.form"
              :rules="state.rules"
              label-position="top"
            >
              <el-form-item label="名称：">
                <el-input
                  maxlength="30"
                  size="large"
                  v-model="state.form.mingcheng"
                />
              </el-form-item>
              <el-form-item label="图片(建议尺寸:750*1624px)">
                <bjz-oss
                  :previewList="state.form.tupian"
                  :accept="['.jpg', '.png', '.jpeg']"
                  @success="successImg"
                  @remove="removeImg"
                />
              </el-form-item>
              <el-form-item label="介绍：">
                <el-input
                  rows="5"
                  type="textarea"
                  size="large"
                  v-model="state.form.jieshao"
                />
              </el-form-item>
              <el-form-item label="类型：">
                <el-select
                  v-model="state.form.leixing"
                  size="large"
                  placeholder=""
                  style="width: 240px"
                  @change="select(index)"
                >
                  <el-option
                    v-for="item in state.type"
                    :key="item.dicValue"
                    :label="item.dicLabel"
                    :value="item.dicValue"
                  />
                </el-select>
              </el-form-item>
              <el-form-item
                v-if="state.form.leixing == 'yindaoyeleixing_fuwenben'"
                label="富文本："
              >
                <editor
                  :initValue="state.form.leixingneirong"
                  :index="index"
                  @onVal="onVal"
                />
              </el-form-item>
              <el-form-item
                v-if="state.form.leixing == 'yindaoyeleixing_lianjie'"
                label="跳转链接："
              >
                <el-input size="large" v-model="state.form.leixingneirong" />
              </el-form-item>
              <el-form-item class="button-group">
                <el-button
                  style="margin-left: 100px"
                  type="primary"
                  @click="submitForm"
                  >提交</el-button
                >
                <el-button
                  type="primary"
                  style="margin-left: 50px"
                  @click="$router.go(-1)"
                  >取消</el-button
                >
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { reactive } from "vue";
import { useRoute, useRouter } from "vue-router";
import {
  GetDictionaryTree,
  EditNavigation,
  GetNavigationDetail,
} from "@/api/system";
import { baseMsg } from "@/utils/utils";
const route = useRoute();
const router = useRouter();
const state = reactive({
  form: {
    mingcheng: "",
    leixing: "",
    jieshao: "",
    tupian: [],
    // 富文本
    leixingneirong: "",
  },
  type: [],
});
// 根据id查询内容
const GetInfo = () => {
  GetNavigationDetail({ id: route.query.id }).then((res) => {
    if (res.code === 4201) {
      state.form = res.data;
    }
  });
};
// 类型下拉查询
const GetType = async () => {
  const res = await GetDictionaryTree({ dicModel: "yindaoyeleixing" });
  if (res.code == 4201) {
    state.type = res.data;
  }
};
const html2text = (html) => {
  html = html.replace(/(\n)/g, "");
  html = html.replace(/(\t)/g, "");
  html = html.replace(/(\r)/g, "");
  html = html.replace(/<\/?[^>]*>/g, "");
  html = html.replace(/(\s)/g, "");
  return html;
};
const select = () => {
  state.form.leixingneirong = html2text(state.form.leixingneirong);
};
// 图片上传
const successImg = (res) => {
  state.form.tupian.push(res);
};
// 上传文件删除
const removeImg = (index) => {
  state.form.tupian.splice(index, 1);
};
// 富文本编辑器
const onVal = (val) => {
  state.form.leixingneirong = val;
};
// 提交表单
const submitForm = () => {
  EditNavigation(state.form).then((res) => {
    if (res.code == 4202) {
      baseMsg("编辑引导页成功");
      router.go(-1);
    }
  });
};
GetType();
GetInfo();
</script>
<style lang="scss" scoped>
.content {
  border: none !important;
}
.project-info {
  padding: 30px 100px;
  font-size: 20px;
  color: black;
  display: flex;
}
.el-form-item {
  &.vue-editor {
    align-items: baseline;
  }
}
</style>
<style lang="scss">
.form-left-right {
  width: 100%;
  .el-form-item .el-form-item__label {
    min-width: 95px;
  }
}
.button-group {
  margin-top: 50px;
  .el-form-item__content {
    width: 100% !important;
    justify-content: center;
  }
}
</style>
